<template>
  <ElCard header="现存主要问题">
    <el-form :model="formModel" ref="formRef" :show-message="false"  size="small">
      <CardBox header="脑血管疾病">
        <ElFormItem>
          <ElCheckboxGroup
            @change="handleArrayIncludeClear($event, '1', ['a00_04_156'])"
            v-model="formModel.a00_04_155"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_155"
              @change="handleCheckboxIncludeClearOther(key, 'a00_04_155', '1')"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_156"
          label=" "
          :required="formModel.a00_04_155?.includes('6')"
        >
          <ElInput
            :disabled="!formModel.a00_04_155?.includes('6')"
            v-model="formModel.a00_04_156"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="肾脏疾病">
        <ElFormItem>
          <ElCheckboxGroup
            @change="handleArrayIncludeClear($event, '1', ['a00_04_158'])"
            v-model="formModel.a00_04_157"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_157"
              @change="handleCheckboxIncludeClearOther(key, 'a00_04_157', '1')"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_156"
          label=" "
          :required="formModel.a00_04_157?.includes('6')"
        >
          <ElInput
            :disabled="!formModel.a00_04_157?.includes('6')"
            v-model="formModel.a00_04_158"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="心脏疾病">
        <ElFormItem>
          <ElCheckboxGroup
            @change="handleArrayIncludeClear($event, '1', ['a00_04_160'])"
            v-model="formModel.a00_04_159"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_159"
              @change="handleCheckboxIncludeClearOther(key, 'a00_04_159', '1')"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_160"
          label=" "
          :required="formModel.a00_04_159?.includes('7')"
        >
          <ElInput
            :disabled="!formModel.a00_04_159?.includes('7')"
            v-model="formModel.a00_04_160"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="血管疾病">
        <ElFormItem>
          <ElCheckboxGroup
            @change="handleArrayIncludeClear($event, '1', ['a00_04_162'])"
            v-model="formModel.a00_04_161"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_161"
              @change="handleCheckboxIncludeClearOther(key, 'a00_04_161', '1')"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_162"
          label=" "
          :required="formModel.a00_04_161?.includes('4')"
        >
          <ElInput
            :disabled="!formModel.a00_04_161?.includes('4')"
            v-model="formModel.a00_04_162"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="眼部疾病">
        <ElFormItem>
          <ElCheckboxGroup
            @change="handleArrayIncludeClear($event, '1', ['a00_04_164'])"
            v-model="formModel.a00_04_163"
          >
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_163"
              @change="handleCheckboxIncludeClearOther(key, 'a00_04_163', '1')"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_164"
          label=" "
          :required="formModel.a00_04_163?.includes('5')"
        >
          <ElInput
            
            :disabled="!formModel.a00_04_163?.includes('5')"
            v-model="formModel.a00_04_164"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="神经系统疾病">
        <ElFormItem>
          <ElRadioGroup
            @change="handleStringIncludeClear($event, '1', ['a00_04_166'])"
            v-model="formModel.a00_04_165"
          >
            <ElRadio
              v-for="(value, key) in formSource.a00_04_165"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_166"
          label=" "
          :required="formModel.a00_04_165?.includes('2')"
        >
          <ElInput
            
            :disabled="!formModel.a00_04_165?.includes('2')"
            v-model="formModel.a00_04_166"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
      <br />
      <CardBox header="其他系统疾病">
        <ElFormItem>
          <ElRadioGroup
            @change="handleStringIncludeClear($event, '1', ['a00_04_168'])"
            v-model="formModel.a00_04_167"
          >
            <ElRadio
              v-for="(value, key) in formSource.a00_04_165"
              :key="key"
              :label="key"
            >
              {{ value }}
            </ElRadio>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          prop="a00_04_168"
          label=" "
          :required="formModel.a00_04_167?.includes('2')"
        >
          <ElInput
           
            :disabled="!formModel.a00_04_167?.includes('2')"
            v-model="formModel.a00_04_168"
            maxlength="25"
            show-word-limit
          />
        </ElFormItem>
      </CardBox>
    </el-form>
  </ElCard>
</template>

<script lang="ts" setup>
import { IExistIssue } from "@/model";
import { computed, reactive, ref, toRaw, watch } from "vue";
import { tjwx } from "@/dict";
import formUtils from "./formUtils";
import { ElForm } from "element-plus";
import { cloneDeep } from "lodash-es";

const props = defineProps<{
  existIssue: Partial<IExistIssue>;
}>();
const formSource = reactive(tjwx);
const formModel = ref(cloneDeep(props.existIssue));
const {
  handleCheckboxIncludeClearOther,
  handleArrayIncludeClear,
  handleStringIncludeClear,
} = formUtils(formModel);
const formRef = ref<InstanceType<typeof ElForm>>();
const validateForm = () => {
  return formRef.value?.validate();
};
const getData = () => {
  return toRaw(formModel.value);
};
defineExpose({ validateForm, getData });
</script>
<style scoped lang="scss"></style>
